<template>
  <div class="OrderLock">
    <el-row>
      <el-col :span="24" class="TextAlignL">
        <h2 style="color: #666;">
          <span @click="closePrint" style="cursor: pointer;">工单锁定</span>
          <span v-if="warnVisible"> / 预警详情</span>
        </h2>
      </el-col>
      <!-- 列表 -->
      <section v-if="!warnVisible">
        <el-col :span="24">
          <span style="font-size: 14px;color:#606266;margin-right: 20px;">工单号</span>
          <el-input  v-model="searchFbillno" size="mini" style="width: 200px;margin-right: 20px;" clearable></el-input>
          <el-button type="primary" size="mini" @click="getOrderLockList">查询</el-button>
          <el-button size="mini" type="success" :loading="btLoading" @click="exportExcel">{{ btLoading ? '正在导出请稍后...' : '导出'}}</el-button>
        </el-col>
        <el-col :span="24" style="width: 100%;height: 4px; border-bottom: 1px dashed #ccc;margin: 20px auto 0 auto;">
        </el-col>
        <el-col :span="24">
          <el-table
            :data="workOrderList"
            @row-dblclick="seeDteail"
            :row-class-name="tableRowClassName"
            v-loading="listLoading"
            style="width: 100%">
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              property="FHeadSelfJ01100_text"
              label="是否锁库"
              width="100">
            </el-table-column>
            <el-table-column
              property="fname"
              label="生产车间"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              property="FCommitDateTxt"
              label="前道下达日期"
              width="120">
            </el-table-column>
            <el-table-column
              property="fbillno"
              label="工单号"
              width="130"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              property="fnumber"
              label="产品名称"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              property="fqty"
              label="数量"
              width="80">
            </el-table-column>
            <el-table-column label="交期" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  style="color:#606266;"
                  @click="changeDate(scope.$index, scope.row)">{{scope.row.FPlanFinishDateTxt}}</el-button>
              </template>
            </el-table-column>
            <el-table-column
              property="fshort1Txt"
              label="是否缺料"
              width="80">
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  :type="scope.row.fshort1 == 0 ? 'danger' : ''"
                  :disabled="scope.row.FHeadSelfJ01100 == '2'"
                  @click="lock(scope.$index, scope.row)">锁库</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" class="TextAlignR MarginT_20"  v-if="workOrderList.length > 1">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="curPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="sum">
          </el-pagination>
        </el-col>
      </section>
      <section  v-if="!warnVisible">
        <!-- 详情 -->
        <el-dialog id="detailDialog" title="工单锁定详情" :visible.sync="dialogTableVisible" fullscreen :close-on-click-modal="false">
          <OrderLockDetail :OrderId="OrderId" :timestamp="timestamp"/>
        </el-dialog>
      </section>
    </el-row>
  </div>
</template>

<script>
import {secondToFormat} from '../util/utils'
import OrderLockDetail from '../components/OrderLockDetail.vue'

export default {
  name: 'OrderLock',
  data () {
    return {
      searchFbillno: '',
      OrderId: '',
      timestamp: '',
      workOrderList: [],
      listLoading: false,
      loadingW: false,
      btLoading: false,
      warnVisible: false,
      dialogTableVisible: false,
      curPage: 1,
      pageSize: 50,
      sum: 20
    }
  },
  components: {
    OrderLockDetail
  },
  created () {
    this.getOrderLockList()
  },
  methods: {
    closePrint () {
      this.warnVisible = false
    },
    tableRowClassName ({row, rowIndex}) {
      if (row.fshort1 === 0) {
        return 'red-row'
      }
      return ''
    },
    handleCurrentChange () {
      this.getOrderLockList()
    },
    lock (idx, row) {
      this.$confirm('确认锁库?', '提示', {
        showClose: false,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingW = true
        this.Http.post('updatesk?finterid=' + row.finterid
        ).then(res => {
          switch (res.data.code) {
            case 1:
              this.$message({
                message: '锁库成功!',
                type: 'success'
              })
              this.loadingW = false
              this.getOrderLockList()
              break
            default:
              this.$message({
                message: '锁库失败!',
                type: 'error'
              })
              this.loadingW = false
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
      })
    },
    getOrderLockList () {
      this.listLoading = true
      this.Http.get('sklist', {number: this.pageSize, page_num: this.curPage, fbillno: this.searchFbillno}
      ).then(res => {
        switch (res.data.code) {
          case 1:
            this.sum = res.data.orderCount
            this.workOrderList = res.data.orderlist.map((item) => {
              item.FCommitDateTxt = secondToFormat(item.FCommitDate.time)
              item.FPlanFinishDateTxt = secondToFormat(item.FPlanFinishDate.time)
              item.fshort1Txt = item.fshort1 === 0 ? '否' : '是' // 1  缺料
              item.FHeadSelfJ01100_text = item.FHeadSelfJ01100 === '0' ? '否' : '是'
              return item
            })
            this.listLoading = false
            break
          default:
            this.listLoading = false
            this.$message({
              message: res.data.message + '!',
              type: 'error'
            })
        }
      }).catch((error) => {
        console.log(error)
        this.listLoading = false
      })
    },
    seeDteail (row, $event) {
      console.log(row)
      this.OrderId = row.finterid
      this.timestamp = (new Date()).getTime()
      this.dialogTableVisible = true
    },
    // 导出
    async exportExcel () {
      this.btLoading = true
      this.listLoading = true
      let exportData = await this.getExportData()
      this.listLoading = false
      this.btLoading = false
      require.ensure([], () => {
        const { exportJsonToExcel } = require('../vendor/Export2Excel.js')
        const tHeader = ['工单号', '前后道标志', '物料代码', '物料名称', '规格', '单位', '缺料量', '计划投料数', '即时库存', '未调拨数量', '合格未入库', '本次锁定', '总锁定量', '未锁定量', '替代料量']
        const filterVal = ['FBillNo', 'FEntrySelfY0280', 'FNumber', 'FName', 'FModel', 'FUnit', 'fql', 'FAuxQtyMust', 'FQty', 'FDiaobo', 'FRuku', 'fqty1', 'fqty2', 'fqty3', 'ftidai']
        const data = this.formatJson(filterVal.concat('fqty', 'FSecInv', 'duanque', 'zaitu', 'fbillno', 'FName'), exportData)
        exportJsonToExcel(tHeader, data, '工单锁定')
      })
    },
    getExportData () {
      return new Promise((resolve, reject) => {
        this.Http.get('skexport', {}
        ).then(res => {
          switch (res.data.code) {
            case 1:
              resolve(res.data.orderlist)
              break
            default:
              this.listLoading = false
              this.btLoading = false
              this.$message({
                message: res.data.message + '!',
                type: 'error'
              })
          }
        }).catch((error) => {
          console.log(error)
          this.listLoading = false
          this.btLoading = false
        })
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>
<style lang="less" scoped>
@Padding: 24px;
.OrderLock{
  width: calc(100% - 2*@Padding);
  background: #fff;
  padding: 0 @Padding @Padding @Padding;
  margin-top: @Padding;
}
</style>
